<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小红书网络监控 - 详细日志</title>
    <link rel="stylesheet" href="shared/common.css">
    <link rel="stylesheet" href="logs.css">
</head>
<body>
    <div class="header">
        <h1>🔍 网络请求监控日志</h1>
        <p class="subtitle">详细的网络请求记录和分析</p>
    </div>

    <div class="controls">
        <div class="search-box">
            <input type="text" class="search-input" id="searchInput" placeholder="搜索URL、方法或状态码...">
            <span class="search-icon">🔍</span>
        </div>
        
        <select class="filter-select" id="methodFilter">
            <option value="">所有方法</option>
            <option value="GET">GET</option>
            <option value="POST">POST</option>
            <option value="PUT">PUT</option>
            <option value="DELETE">DELETE</option>
            <option value="PATCH">PATCH</option>
        </select>
        
        <select class="filter-select" id="statusFilter">
            <option value="">所有状态</option>
            <option value="2xx">2xx 成功</option>
            <option value="3xx">3xx 重定向</option>
            <option value="4xx">4xx 客户端错误</option>
            <option value="5xx">5xx 服务器错误</option>
            <option value="error">网络错误</option>
        </select>
        
        <button class="btn btn-primary" id="refreshBtn">🔄 刷新</button>
        <button class="btn btn-secondary" id="clearBtn">🗑️ 清空</button>
        <button class="btn btn-secondary" id="exportBtn">📥 导出</button>
    </div>

    <div class="stats" id="statsContainer">
        <div class="stat-item">
            <span class="stat-number" id="totalCount">0</span>
            <span class="stat-label">总请求数</span>
        </div>
        <div class="stat-item">
            <span class="stat-number" id="filteredCount">0</span>
            <span class="stat-label">显示数量</span>
        </div>
        <div class="stat-item">
            <span class="stat-number" id="successCount">0</span>
            <span class="stat-label">成功请求</span>
        </div>
        <div class="stat-item">
            <span class="stat-number" id="errorCount">0</span>
            <span class="stat-label">失败请求</span>
        </div>
    </div>

    <div class="logs-container">
        <div class="loading" id="loadingState">
            <div class="spinner"></div>
            <p>正在加载日志数据...</p>
        </div>

        <div class="empty-state" id="emptyState" style="display: none;">
            <div class="icon">📡</div>
            <h3>暂无日志记录</h3>
            <p>开始浏览小红书页面以生成网络请求日志</p>
        </div>

        <div id="logsContainer"></div>
    </div>

    <!-- 详细信息弹框 -->
    <div id="detailModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 id="modalTitle">🔍 网络请求详细信息</h2>
                <span class="modal-close" id="modalClose">&times;</span>
            </div>
            <div class="modal-body" id="modalBody">
                <!-- 详细信息内容将通过JavaScript动态生成 -->
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" id="copyDetailsBtn">📋 复制详情</button>
                <button class="btn btn-primary" id="closeModalBtn">关闭</button>
            </div>
        </div>
    </div>

    <div id="toastContainer"></div>

    <script src="logs/index.js" type="module"></script>
</body>
</html> 